import React, { PureComponent, Fragment } from 'react';
import { Form, Modal, Button, Tag, Row, Col, Table, Input, Card, Spin, message } from 'antd';
import { connect } from 'dva';
const Search = Input.Search;

@connect(({ loading }) => ({
  loading: loading.effects['vehicle/fetchQueryObdDeviceList']
}))
class CustomizedForm extends PureComponent {
  columns = [
    {
      title: '序号',
      render: (text, record, index) => `${index + 1}`,
      key: 'index',
    },
    {
      title: '设备编号',
      dataIndex: 'deviceId',
    },
    {
      title: '设备iccid',
      dataIndex: 'iccid',
    },
    {
      title: '创建时间',
      dataIndex: 'gmt_create',
    }
  ];
  constructor(props) {
    super(props);
    this.state = {
      allVehicle: {},
      pagaValue: {
        page: '1',
        pageSize: '10',
        status:1
      },
      selectedRowKeys:[],
      selectedRows:[]
    };
  }
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'vehicle/fetchQueryObdDeviceList',
      payload: {...this.state.pagaValue},
      callback:(res)=>{
        if(res.code !== "000000"){message.warning(res.msg);return}
        this.setState({
          allVehicle:res
        })
      }
    });
  }
  // 分页变化
  handleTableChange = (pagination, filters, sorter) => {
    const { dispatch } = this.props;
    const pager = { ...this.state.pagaValue };
    pager.page = pagination.current;
    this.setState({
      pagaValue: pager,
    });
    dispatch({
      type: 'vehicle/fetchQueryObdDeviceList',
      payload: pager,
      callback: res => {
        if (res.code !== "000000") { message.warning(res.msg); return }
        this.setState({
          allVehicle: res
        })
      },
    });
  };
  // 车牌号检索
  handleSearch=(value)=>{
    const { dispatch } = this.props;
    const data = { ...this.state.pagaValue };
    data.iccid = value;
    data.page = 1;
    this.setState({
      pagaValue: data,
    });
    dispatch({
      type: 'vehicle/fetchQueryObdDeviceList',
      payload: data,
      callback: res => {
        if (res.code !== "000000") { message.warning(res.msg); return }
        this.setState({
          allVehicle: res
        })
      },
    });
  }
  // 勾选变化
  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, selectedRows });
  }
  // 确定回调
  handleOk=()=>{
    const { handleOk } = this.props;
    const data = this.state.selectedRows;
    handleOk(data)
  }
  render() {
    const {
      visible,
      handleCancel,
      loading,
    } = this.props;
    const { allVehicle, selectedRowKeys  } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      type:"radio"
    };
    return (
      <Modal
        destroyOnClose //关闭时销毁 Modal 里的子元素
        title="选择设备"
        // width={1150}
        visible={visible}
        // maskClosable={false}
        // footer={null}
        onOk={this.handleOk}
        onCancel={() => handleCancel()}
      >
        <Fragment>
          <Row type="flex" gutter={24}>
            <Col span={24}>
              <Search
                placeholder="请输入设备iccid"
                onSearch={value => this.handleSearch(value)}
                enterButton
                style={{ width:"250px"}}
              />
              
              <Table
                rowSelection={rowSelection}
                dataSource={allVehicle.list}
                columns={this.columns}
                pagination={allVehicle.pagination}
                onChange={this.handleTableChange}
                loading={loading}
                rowKey={record => record.id}
                size="small"
                style={{ marginTop: 20 }}
              />
            </Col>
          </Row>
        </Fragment>
      </Modal>
    );
  }
}

const DetailModel = Form.create()(CustomizedForm);
export default DetailModel;
